<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>植物百科</title>
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../../css/globle.css" />
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style>
			span {
			margin: 10px;
		}

		.Tabl {
			height: 30px;
			width: 88%;
			font-size: 14px;

			text-align: left;
			margin-left: 6%;
		}

		.Td1 {
			font-weight: bold;
			color: #B8B8B8;
			width: 110px;
			font-size: 13px;
		}

		.Td2 {
			color: #000000;
			text-align: left;
			font-size: 13px;
			color: rgb(85,85,85);
		}

		.Hr {
			height: 1px;
			width: 96%;
			background-color: #D8D8D8;
			margin-left: 2%;
		}

		.Butt {
			border: 1px solid #B8B8B8;
			border-radius: 20px;
			color: #FFFFFF;
			height: 17px;
			width: 17px;
			outline: none;
		}

		.TabImg {
			height: 150px;
			width: 96%;
			margin-left: 2%;
			border: 10px solid #D8D8D8;
		}

		.TdImg1 {
			height: 110px;
			width: 90px;
		}

		.TdImg2 {
			height: 110px;
			width: 90px;
		}

		.ButAdd {
			height: 110px;
			width: 100px;
			font-size: 100px;
			color: #FFFFFF;
			background-color: #B8B8B8;
		}

		.TabL {
			height: 75px;
			width: 88%;
			font-size: 16px;
			font-weight: bold;
			text-align: left;
			margin-left: 6%;
		}

		.ButL {
			height: 40px;
			width: 100%;
			background-color: #D0D0D0;
			position: fixed;
			bottom: 0;
		}

		.Td3 {
			text-align: center;
			width: 50%;
		}

		html,
		body {
			background-color: #F5F6F6;
		}

		ul {
			position: relative;
			width: 100%;
		}

		ul li {
			list-style: none;
		}

		ul li input {
			display: none;
		}

		ul li label {
			float: left;
			width: 33%;
			text-align: center;
			line-height: 34px;
			height: 35px;
			border-right: 0;
			box-sizing: border-box;
			cursor: pointer;
			transition: all .3s;
			background-color: #1abc9c;
			color: #fff;
		}

		ul li input:checked+label {
			color: #000;
			background-color: #F5F6F6;
		}

		ul li:last-child label {
			border-right: 1px solid #1abc9c;
		}

		ul li .content {
			opacity: 0;
			visibility: hidden;
			position: absolute;
			left: 0;
			top: 31px;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			transition: all .3s;
		}

		ul li .content table {
			width: 100%
		}

		ul li .content td {
			border-bottom: 1px solid #DFE0E0;
			height: 60px;
		}

		ul li .content td:nth-child(1) {
			padding-left: 10px;
		}

		ul li .content td:nth-child(1) p:nth-child(2) {
			color: #555555
		}

		ul li:nth-child(1) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(2) .content {
			background-color: #F5F6F6;
		}

		ul li:nth-child(3) .content {
			background-color: #F5F6F6;
		}

		ul li input:checked~.content {
			opacity: 1;
			visibility: visible;
		}

		.Add {
			height: 40px;
			width: 96%;
			background-color: #1ABC9C;
			color: white;
			text-align: center;
			font-size: 15px;
			margin-top: 20px;
			outline: none;
		}

		.fontcolr {
			color: #cccccc
		}

		.clickfont {
			color: #72EDD1
		}

		.remark {
			font-size: 26px;
			color: red;
			font-weight: bold;
			display: none;
		}

		#imgBox img {
			display: block;
			width: 80%;
			margin: 30px auto;
		}

		#fullPage {
			display: none;
			background: black;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 19930428;
		}

		#fullPage img {
			display: block;
			width: 100%;
		}

		#canvas {
			width: 100%;
			height: 100%;
			background: none;
			display: block;
		}
		.aa{
			width: 45%;
			height: 30px;
			float: left;
			font-size: 18px;
			background-color: #FFFFFF;
		}

		.ab{
			width: 100%;
			color: #797979;
			float: left;
			margin-top: 5px
		}
		.ab span{
			margin-left: 30px;
			font-size: 16px
		}
		</style>
	</head>
	<body>

		<table class="Tabl">
			<tr >
				<td class="Td1">植物名称</td>
				<td class="Td2" id="plantName">
				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">树种</td>
				<td class="Td2" id="species">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">别称</td>
				<td class="Td2" id="alias">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">科属</td>
				<td class="Td2" id="genus">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">试用地区</td>
				<td class="Td2" id="family">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">习性</td>
				<td class="Td2" id="division">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">用途</td>
				<td class="Td2" id="kingdom">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">常见病虫害</td>
				<td class="Td2" id="species1">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
	
	
		<table class="Tabl">
			<tr>
				<td class="Td1">苗木规格</td>
				<td class="Td2" id="guige">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">春天最小</td>
				<td class="Td2" id="csmallvalue">

				</td>
				<td class="Td1">春天最大</td>
				<td class="Td2" id="cbigvalue">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">夏天最小</td>
				<td class="Td2" id="xsmallvalue">

				</td>
				<td class="Td1">夏天最大</td>
				<td class="Td2" id="xbigvalue">

				</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">秋天最小</td>
				<td class="Td2" id="qsmallvalue">
				</td>
				<td class="Td1">秋天最大</td>
				<td class="Td2" id="qbigvalue">
				</td>
			</tr>
		</table>

		<hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">冬天最小</td>
				<td class="Td2" id="dsmallvalue">
				<td class="Td1">冬天最大</td>
				<td class="Td2" id="dbigvalue">
				</td>
			</tr>
		</table>

		<hr class="Hr"/>
		<div style="padding: 10px;">
			<!-- <ul class="upload-ul clearfix">
				<li class="upload-pick">
					<div class="webuploader-container clearfix" id="goodsUpload"></div>
				</li>
			</ul> -->
			<img src="" onclick="lookimage()" id="image"width= 335;height= 350;/>
		</div>
		<br/>
		<br/>
		<!-- <hr class="Hr"/>
		<table class="Tabl">
			<tr>
				<td class="Td1">补充信息</td>
			</tr>
		</table>
		<hr class="Hr"/>
		<table class="TabL">
			<tr>
				<td>				<textarea rows="4" cols="35" placeholder="填写你的其他内容描述！"></textarea></td>
			</tr>
		</table> -->
		<!-- <table class="ButL">
		<tr>
		<td class="Td3"><button>◁</button></td>
		<td class="Td3"><button>▷</button></td>
		</tr>
		</table> -->

	</body><script src="../../script/webuploader.min.js"></script>
	<script src="../../script/diyUpload.js"></script>
	<script src="../../script/common.js"></script>
	<script src="../../script/vue.js"></script>
	<script src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript">
		apiready = function() {

		var	id = api.pageParam.id;

					$.ajax({
						type : "post",
						//async : false, //同步执行
						url : BaseServiceUrl+"mobile/plant/details.json",
						data : {
						id :id
						},
						dataType : "json", //返回数据形式为json
						success : function(result) {

							$("#plantName").html(result.data.name);
							$("#species").html(result.data.species);
							$("#alias").html(result.data.alias);
							$("#genus").html(result.data.genus);
							$("#family").html(result.data.family);
							$("#division").html(result.data.division);
							$("#kingdom").html(result.data.kingdom);
							$("#species1").html(result.data.species);
						
					
							$("#guige").html(result.data.guige);
							$("#csmallvalue").html(result.data.csmallvalue);
							$("#cbigvalue").html(result.data.cbigvalue);
							$("#xsmallvalue").html(result.data.xsmallvalue);
							$("#xbigvalue").html(result.data.xbigvalue);
							$("#qsmallvalue").html(result.data.qsmallvalue);
							$("#qbigvalue").html(result.data.qbigvalue);
							$("#dsmallvalue").html(result.data.dsmallvalue);
							$("#dbigvalue").html(result.data.dbigvalue);
							$("#image").attr("src",result.data.image);
							//	find(result.datas.hundredplant);

						}
					});


		};

		function find (id){

			$.ajax({
						type : "post",
						//async : false, //同步执行
						url : BaseServiceUrl+"mobile/patrol/plantDetailed1.json",
						data : {
						id :id1
						},
						dataType : "json", //返回数据形式为json
						success : function(result) {


							$("#alias").html(result.data.alias);
							$("#genus").html(result.data.genus);
							$("#family").html(result.data.family);
							$("#division").html(result.data.division);
							$("#kingdom").html(result.data.kingdom);
							$("#species1").html(result.data.species);


							$("#image").attr("src","http://180.76.150.7:8080/linyi/"+result.data.image);

						}
					});
			}
		//选择正常或者异常
		flag = "btn1";
		function btn1() {
			document.getElementById("btn2").style.color = "#FFFFFF";
			document.getElementById("btn1").style.color = "#FFFFFF";
		}

		function btn2() {
			document.getElementById("btn1").style.color = "#FFFFFF";
			document.getElementById("btn2").style.color = "#FFFFFF";
		}

		function btn(num) {
			if (num == 1) {
				document.getElementById(flag).style.color = "#FFFFFF";
				document.getElementById(flag).style.backgroundColor = "#FFFFFF";
				document.getElementById("btn1").style.color = "#FFFFFF";
				document.getElementById("btn1").style.backgroundColor = "#FF8C00";
				flag = "btn1";
			}
			if (num == 2) {
				document.getElementById(flag).style.color = "#FFFFFF";
				document.getElementById(flag).style.backgroundColor = "#FFFFFF";
				document.getElementById("btn2").style.color = "#FFFFFF";
				document.getElementById("btn2").style.backgroundColor = "#FF8C00";
				flag = "btn2";
			}
		}
			function lookimage(){
		var image =$("#image").attr("src");

		//previewThePic(image);
		previewThePicByimageBrowser(image);
		}

	</script>
</html>
